<template>
	<view class="container">
		<!-- 页面头部返回和搜索图标，标题 -->
		<my-Back-search :yesSearch="false">
			<template #back>
				<uni-icons @click="onBack" type="back" size="28" color="#ff0000"></uni-icons>
			</template>
			<template #time>
				<view>我的钱包</view>
			</template>
		</my-Back-search>
		<!-- 展示金额 -->
		<view class="coins-flex">
			<view class="coins-con">
				<view style="color: #fff; font-size: 40rpx;">¥ {{ Number(user.notMoney).toFixed(1)}}</view>
				<view class="coin-text">余额</view>
			</view>
			<view class="coins-con">
				<view style="color: #40b63b; font-size: 40rpx;">¥ {{Number(user.notMoney).toFixed(1) < 5 ? 0 : Number(user.notMoney).toFixed(1)}}</view>
				<view class="coin-text">可提现</view>
			</view>
			<view class="coins-con">
				<view style=" font-size: 40rpx;">¥ {{user.yesMoney}}</view>
				<view class="coin-text">已提现</view>
			</view>
		</view>

		<!-- 提现按钮 -->
		<view class="coins-bottum">
			<view class="bottum-con" style="color: #fff;" @click="onbottum(1)">
				<view>提现记录</view>
			</view>
			<view class="bottum-con" style="color: #40b63b;" @click="onbottum(3)">
				<view>收入记录</view>
			</view>
			<view class="bottum-con" @click="onbottum(2)">
				<view>提现</view>
			</view>
		</view>

		<!-- 分红规则 -->
		<view class="wchat">
			<max-title-min :fontSize="34" :isIcon="false" title="分红规则" text="更多"></max-title-min>
			<max-title-min :fontSize="32" :isIcon="false" title="一、分红方式介绍" text="更多"></max-title-min>
			<view style="padding:0 35rpx;">{{text1}}</view>
			<view v-for="item in title">
				<max-title-min :fontSize="32" :isIcon="false" :title="item.title" text="更多"></max-title-min>
				<view style="padding:0 35rpx;" v-for="tag in item.content">{{tag.name}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	// #ifdef MP-WEIXIN
	const user = ref(uni.getStorageSync("user"));
	console.log("user:", user)
	// #endif
	import {
		UserMoneyEnter
	} from '@/API/geidApis.js';
	import {
		getOpenId
	} from "@/utils/request.js";


	// 返回按钮
	function onBack() {
		uni.navigateBack({
			delta: 1 // 返回上一个页面
		});
	}
	// 提现与记录
	const onbottum = async (index) => {
		if (index == 1) {
			uni.navigateTo({
				url: '/pages/geid/coins/coinsEnter/coinsEnter?type=1'
			});
		}
		if (index == 3) {
			uni.navigateTo({
				url: '/pages/geid/coins/coinsEnter/coinsEnter?type=2'
			});
		}
		if (index == 2) {
			if (user.value.notMoney < 5) {
				uni.showToast({
					title: "余额不低于5元！",
					icon: 'none'
				});
				return;
			}
			uni.showModal({
				title: '分红提现',
				editable: true,
				placeholderText: '请输入提现金额！',
				success: async function(res) { // 将success回调函数改为async函数
					console.log("res:", res);
					if (res.confirm) {
						console.log('用户点击确定');
						try {
							const tes = await UserMoneyEnter(user.value.id, res.content, '微信小红包已到账');
							uni.showModal({
								title: '提现到账说明',
								content: '提现操作已成功！其次进入提现记录页面进行截图而联系客服，客服确认无误后客服向您发出红包，请24小时内拆包领取！',
								showCancel: false,
								confirmText: '知道',
								confirmColor: '#ff0000'
							})
							uni.removeStorageSync('user');
							const openId = await getOpenId(); // 调用 getOpenId 函数
							user.value = uni.getStorageSync("user");
						} catch (error) {
							console.error('发生错误:', error);
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	};





	const text1 = ref(
		'为了鼓励用户通过各种方式推广我们的产品，我们特制定了以下分红奖励机制。用户可以通过生成通用码、小程序码、复制链接等方式进行推广，每成功引进一名新用户即可获得直接分红0.3元。此外，若引进的用户购买会员，推荐人还将获得购买金额40%的分红。'
	)
	const title = ref([{
			title: '·推广分红',
			content: [{
					name: '1.用户通过生成的通用码、小程序码或复制的链接等形式将产品推广给他人。'
				},
				{
					name: '2.每成功引进一位新用户，推荐人可立即获得0.3元的直接分红奖励。'
				},
				{
					name: '3.若引进的新用户购买了会员服务，推荐人将额外获得该用户购买会员金额的50%作为分红奖励。'
				}
			]
		},
		{
			title: '·提现规则',
			content: [{
					name: '1.提现额需不低于5元人民币，未达到此标准的分红将累积至下次申请。'
				},
				{
					name: '2.用户可在任何时间提交提现申请，若申请日期为工作日，则资金将在当天或次日上午通过银行转账或红包的方式到账；若非工作日，则顺延至下一个工作日处理。'
				}
			]
		},
		{
			title: '·多次购买与分红',
			content: [{
				name: '1.如果通过推广引入的用户进行了多次会员购买，每次购买都会按照40%的比例计算分红给推荐人，即推荐人可以因为同一个用户的多次购买行为多次获得分红。'
			}]
		},
		{
			title: '·其他注意事项',
			content: [{
					name: '1.分红奖励以实际支付金额为准，退款订单不计入分红范围。'
				},
				{
					name: '2.我们保留对分红规则调整的权利，并会提前通知所有参与分红计划的用户。'
				},
				{
					name: '3.如发现违规操作（如刷单等），我们将取消相关分红资格，并可能采取进一步措施。'
				}
			]
		}
	])
</script>
<style scoped>
	.container {
		width: 100%;
	}

	.coins-flex,
	.coins-bottum {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.coins-con {
		width: 30%;
		height: 300rpx;
		background: #1d1d1d;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		border-radius: 20rpx;
		font-weight: bold;
		font-size: 35rpx;
		color: #ff0000;
	}

	.coin-text {
		margin-top: 50rpx;
	}

	.bottum-con {
		width: 30%;
		height: 100rpx;
		background: #1d1d1d;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		border-radius: 20rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #ff0000;
	}

	.wchat {
		background: #1d1d1d;
		margin-top: 30rpx;
		width: 92%;
		position: relative;
		left: 4%;
		padding: 10rpx 0 30rpx 0;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 20rpx rgba(255, 0, 0, 0.2);
	}
</style>